<template>
  <Select
    ref="storeName"
    v-model="currValue"
    :placeholder="placeholder"
    filterable
    remote
    :loading="loading"
    clearable
    :label-in-value="isLabelInvalue"
    :remote-method="remote"
    @on-change="onchange"
    @on-clear="remote"
    @on-open-change="onOpen"
  >
    <Option v-for="item in storeList" :key="item.id" :value="item.id">{{ item.label }}<div>联系人: {{item.ownerName}}-{{item.storePhone}}</div></Option>
  </Select>
</template>
<script>
import { debounce } from '@/util'
export default {
  props: {
    placeholder: {
      type: String,
      default: '请输入门店名称'
    },
    value: {
      type: [String, Number],
      default: null
    },
    isLabelInvalue: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      storeList: [],
      loading: false,
      name: '',
      oTimerDetail: null
    }
  },
  computed: {
    currValue: {
      get () {
        return this.value
      },
      set (v) {
        this.$emit('input', v || '')
      }
    }
  },
  mounted () {
    // this.getDetailData(this.name)
  },
  methods: {
    onchange (val) {
      this.$emit('onchange', val)
    },
    onOpen (isOpen) {
      if (isOpen) this.getDetailData(this.name)
    },
    remote (query = '') {
      this.name = query
      this.getDetailData(query)
    },
    getDetailData: debounce(function d (query = '') {
      this.loading = true
      this.name = query
      let param = {
        storeName: this.name
      }
      return this.$ajaxGet('/tiger/store/page', param).then(data => {
        this.loading = false
        this.storeList = []
        this.storeList = (data.records || []).map(item => {
          return {
            id: item.storeId,
            label: item.storeName,
            ownerName: item.ownerName,
            storePhone: item.storePhone
          }
        })
      })
    }, 400)
  }
}
</script>
